<template>
  <view>
    <!-- 头部搜索 -->
    <view class="top-search">
      <u-search
        shape="square"
        :show-action="false"
        bgColor="#fff"
        placeholder="搜索"
      ></u-search>
    </view>
    <!-- 轮播图 -->
    <view class="swiper">
      <u-swiper
        :autoplay="true"
        :list="swiperList"
        keyName="image_src"
        height="340rpx"
        indicator
        indicatorMode="line"
        circular
      >
      </u-swiper>
    </view>
    <!-- 导航 -->
    <view class="navs">
      <navigator v-for="item in navsList" :key="item.name">
        <u--image :src="item.image_src" mode="widthFix" width="100%"></u--image>
      </navigator>
    </view>
    <!-- 楼层 -->
    <view class="floor">
      <view
        class="floor-group"
        v-for="item1 in floorList"
        :key="item1.floor_title.name"
      >
        <!-- 4.1 标题 -->
        <view class="floor-group-title">
          <u--image
            width="100%"
            mode="widthFix"
            :src="item1.floor_title.image_src"
          ></u--image>
        </view>
        <!-- 4.2 内容 -->
        <view class="floor-group-content">
          <navigator
            v-for="(item2, index2) in item1.product_list"
            :key="item2.name"
          >
            <u--image
              v-if="index2 === 0"
              width="100%"
              mode="widthFix"
              :src="item2.image_src"
            ></u--image>

            <u--image
              v-else
              width="100%"
              height="188rpx"
              mode="scaleToFill"
              :src="item2.image_src"
            ></u--image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperList: [], //轮播图
      navsList: [], //导航
      floorList: [], //金刚位
    };
  },
  onLoad() {
    Promise.all([
      this.getswiperList(),
      this.getnavsList(),
      this.getfloorList(),
    ]);
  },
  methods: {
    // 轮播图的
    async getswiperList() {
      this.swiperList = await uni.$u.http.get("/home/swiperdata");
    },
    // 导航的
    async getnavsList() {
      this.navsList = await uni.$u.http.get("/home/catitems");
    },
    // 金刚位
    async getfloorList() {
      this.floorList = await uni.$u.http.get("/home/floordata");
    },
  },
};
</script>

<style lang="scss">
.top-search {
  background-color: #ea4450;
  padding: 10rpx;
}
.navs {
  display: flex;
  width: 100%;
  navigator {
    flex: 1;
    padding: 20px;
  }
}
.floor {
  .floor-group-content {
    // 清除浮动
    overflow: hidden;
    navigator {
      width: 232rpx;
      margin-left: 15rpx;
      float: left;

      /* 
      几张图片的大小不一致 无法直接使用图片高度自适应的设置 
      得要靠自己去计算图片的高度
      1 第一张图片的高度 当时可以使用高度自适应。。
      2 后四张图片的高度，手动去计算，高度等于第一张图片高度的一半即可！！ 
      
       */

      /* 后四个导航标签 */
      // &:nth-last-child(-n + 4) {
      //   image {
      //     height: 188rpx;
      //   }
      // }

      &:nth-last-child(-n + 2) {
        // 后两个导航标签
        margin-top: 15rpx;
      }
    }
  }
}
</style>